<template>
    <!-- 图表 -->
    <div class="mychar-content">
        <component :is='isComponent' :echartsData="echartsData" :echartsName="echartsName"></component>
        <!-- <Pie v-if="type === 'pie'" :echartsData="echartsData" :echartsName="echartsName"/>
        <Bar v-if="type === 'bar' " :echartsData="echartsData" :echartsName="echartsName"/>
        <Line v-if="type === 'line' " :echartsData="echartsData" :echartsName="echartsName"/> -->
    </div>
</template>

<script setup>
import { defineProps, onMounted, toRefs, ref } from "vue";
import Pie from './components/pie.vue'
import Bar from './components/bar.vue'
import Line from './components/line.vue'
const props = defineProps({
    echartsData: [Array, Object],
    echartsName: String,
    type: {
        type: String,
        default: 'pie'
    }
})
const { echartsData, echartsName, type } = toRefs(props)
const isComponent = computed(() => {
    console.log(type.value);
    switch (type.value) {
        case 'pie':
            return Pie
        case 'bar':
            return Bar
        case 'line':
            return Line
        default:
            break;
    }
});
console.log('isComponent',isComponent);
</script>

<style lang="scss" scoped>
.mychar-content {
    width: 100%;
    height: 100%;
}
</style>
